.root {

}

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #213547;
    color: white;
    padding: 20px 20px;
}

.headerLogo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.body {
    width: 100%;
    padding: 20px 0;
}

.container {
    width: 860px;
    margin: 0 auto 0 auto;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充，每列宽度固定为100px */
    gap: 20px; /* 间距，可根据需要调整 */
}

.container div {
    width: 200px;
    height: auto;
    aspect-ratio: 1/0.9;
    background-color: white;
    margin: 5px auto;
    border-radius: 5px;
    box-shadow: 2px 2px 4px #eeeeee;
    border: 1px solid #eeeeee;
    cursor: pointer;
    transition: transform 0.3s ease; /* 添加过渡效果 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.container div:hover {
    transform: scale(1.1);
    border: 1px solid #213547;
}

/*.container {*/
/*    display: block;*/
/*    width: 100%;*/
/*    height: auto;*/
/*    background-color: beige;*/
/*    padding: 1em 0;*/
/*}*/

/*.container div {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/

/*.container div:not(:first-child):not(:last-child) {*/
/*    background-color: white;*/
/*    width: 20%;*/
/*    aspect-ratio: 1/1;*/
/*    margin: 1em 1em;*/
/*}*/

/*.container div:first-child {*/
/*    flex-grow: 1;*/
/*}*/

/*.container div:last-child {*/
/*    flex-grow: 1;*/
/*}*/